'use strict'
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'

import {
    HttpService,
    Tips,
    weixinLogin
} from '../Tools'
import Header from './Common/Header'
import Footer from './Common/Footer'

import '../scss/buy.scss'
import '../plugins/city/css/LArea.css'
import '../plugins/city/js/LArea.js'

import imgBuy from '../Img/buy/buy3.png'
import imgCard from '../Img/buy/card.jpg'
import imgTc from '../Img/buy/tc.png'
import imgClock from '../Img/buy/clock.png'
import imgHome from '../Img/buy/home.png'
import imgHome2 from '../Img/buy/home2.png'
import imgOk from '../Img/buy/ok.jpg'
import imgRight from '../Img/buy/right.png'
import imgUser from '../Img/buy/user.png'
import imgUser2 from '../Img/buy/user2.png'
import imgUsers from '../Img/buy/users.png'
import imgUsers2 from '../Img/buy/users2.png'
import imgPhone from '../Img/buy/phone.png'
import imgPhone2 from '../Img/buy/phone2.png'
import imgPosi from '../Img/buy/posi.png'
import imgPosi2 from '../Img/buy/posi2.png'
import imgPosid from '../Img/buy/posid.png'
import imgPosid2 from '../Img/buy/posid2.png'

export default class Buy extends Component {

    constructor(props) {
        super(props);
        this.state = {
            stop: 0, //页面蒙版显示
            youhui: 0, //优惠是否
            priceStr: `￥365元/年`, //价格字符串
            packagefee: 0,
            orderInfo: {
                schoolId: '',
                schoolName: ''
            },
            slt: {
                slt: 'slt',
                slted: 'slted'
            },
            imgList: {
                phone: '',
                user: '',
                users: '',
                posi: '',
                posid: ''
            },
            submit: 0
        }
    }
    componentDidMount() {
        this.refs.banji.value = sessionStorage.stubanji || '';
        this.refs.name.value = sessionStorage.stuname || '';
        this.refs.phone.value = sessionStorage.stuphone || '';
        this.refs.posi.value = sessionStorage.posi || '收货地址  例：四川省成都市青羊区';
        this.refs.posid.value = sessionStorage.posid || '';
        //收货地址
        HttpService.query({
            url: '/dist/json/city.min.json',
            sync: true,
            success: (data => {
                var area = new LArea();
                area.init({
                    'trigger': '#city',
                    'keys': {
                        id: 'id',
                        name: 'n'
                    }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
                    'type': 1, //数据源类型
                    'data': data //数据源
                });
                let val = [0, 0, 0]
                if (sessionStorage.posiid && sessionStorage.posiid.indexOf(',') > -1)
                    val = sessionStorage.posiid.split(',')
                area.value = val; //控制初始位置，注意：该方法并不会影响到input的value
            })
        });
    }
    componentWillUnmount() {
        sessionStorage.stubanji = this.refs.banji.value;
        sessionStorage.stuname = this.refs.name.value;
        sessionStorage.stuphone = this.refs.phone.value;
        sessionStorage.posi = this.refs.posi.value;
        sessionStorage.posiid = this.refs.posi.getAttribute('iddata');
        sessionStorage.posid = this.refs.posid.value;
    }
    //提交数据
    buySmt(e) {
        e.preventDefault();
        const
            schoolid = this.props.params.schoolId,
            banji = this.refs.banji.value,
            name = this.refs.name.value,
            phone = this.refs.phone.value,
            posi = this.refs.posi.value,
            posid = this.refs.posid.value;

        if (schoolid == undefined) {
            Tips('请选择学校');
            return;
        }
        if (banji == '') {
            Tips('请填写班级');
            return;
        }
        if (banji.replace(/\s+/g, '').length > 12) {
            Tips('班级名称不超过12位');
            return;
        }
        if (name == '') {
            Tips('请填写学生姓名');
            return;
        }
        if (name.replace(/\s+/g, '').length > 5) {
            Tips('学生姓名不超过5位');
            return;
        }
        if (phone == '') {
            Tips('请填写联系手机号');
            return;
        }
        if (!/^1[34578]\d{9}$/.test(phone)) {
            Tips('请填写正确手机号');
            return;
        }
        if (posi == '收货地址  例：四川省成都市青羊区' || posid == '') {
            Tips('请填写完整收货地址');
            return;
        }

        Tips('正在提交订单...', 0);
        this.setState({
            stop: 1
        });
        let rct = this;
        HttpService.query({
            url: '/apph5/device/newDiscountPurchase',
            data: {
                schoolid,
                classname: banji,
                studentname: name,
                telephone: phone,
                smartcardprice: 365,
                address: posi.replace(/\,/g, '') + posid
            },
            success: function(res) {
                if (!/micromessenger/.test(navigator.userAgent.toLowerCase())) {
                    Tips('请在微信端打开支付');
                    rct.setState({
                        stop: 0
                    });
                    return;
                }
                if (res.code == 30013) {
                    const appid = 'wx85577a457cfcd222',
                        redirect_uri = 'https://wx.17find.com/thirdparty/weixin/getcode',
                        state = res.data;
                    weixinLogin(appid, redirect_uri, state);
                    return;
                } else {
                    Tips(res.msg);
                    rct.setState({
                        stop: 0
                    });
                }
            },
            fail: function() {
                Tips('请检查网络连接');
                rct.setState({
                    stop: 0
                });
            }
        })
    }

    //文本框操作
    txtHandle(txtName, sign) {
        let imgList = {};
        let color = '#333';
        if (sign == 2)
            color = '#c9c9ca';
        switch (txtName) {
            case 'phone':
                imgList.phone = sign == 2 ?
                    '' :
                    imgPhone2;
                this.refs.phone.style.color = color
                break;
            case 'name':
                imgList.user = sign == 2 ?
                    '' :
                    imgUser2;
                this.refs.name.style.color = color
                break;
            case 'posi':
                imgList.posi = sign == 2 ?
                    '' :
                    imgPosi2;
                this.refs.posi.style.color = color
                break;
            case 'posid':
                imgList.posid = sign == 2 ?
                    '' :
                    imgPosid2;
                this.refs.posid.style.color = color
                break;
            default:
                imgList.users = sign == 2 ?
                    '' :
                    imgUsers2;
                this.refs.banji.style.color = color
                break;
        }
        this.setState({
            imgList
        });
    }

    //图片上传的label
    lblClick(e) {
        if (this.props.params.schoolId == undefined) {
            Tips('先选择学校');
            e.preventDefault();
        }
    }

    render() {
        const {
            priceStr,
            packagefee,
            youhui,
            stop,
            slt,
            imgList,
            orderInfo,
            submit
        } = this.state
        const {
            schoolId,
            schoolName,
            schoolAddress
        } = this.props.params
        return (
            <div className='buybox'>
                <Header title='填写订单' toLink='/' />
                <form onSubmit={this.buySmt.bind(this)} id='frmbuy' method='post' enctype='multipart/form-data' >
                    <div className='item itmtop' id='schooltips'>
                        <p className='clearfix'>
                            <span className='left'>请正确选择学校名称</span>
                            <span className='right'>客户热线：<a href='tel:4008273366'>400-827-3366</a>
                            </span>
                        </p>
                    </div>
                    <div className='item itmtop'>
                        <img className='mark' src={imgBuy}/>
                        <div className='clearfix mkword'>
                            <span className='left'>随寻智能学生证</span>
                            <span className='right'>{priceStr}</span>
                        </div>

                    </div>
                    <div className='title'>配送信息</div>
                    <div className='item clearfix mbpx item2'>
                                <img className='mark' src={imgHome}/>
                                <Link id='sltschool' to={'/school/' + schoolId + '/' + encodeURI(schoolName) + '/' + encodeURI(schoolAddress)} className='sltsch left'>{schoolId
                                        ? decodeURI(schoolName)
                                        : '请选择学校'}</Link>
                                <img className='mark mark3' src={imgRight}/>
                            </div>

                    <div className='item mbpx'>
                        {imgList.users
                            ? <img className='mark' src={imgList.users}/>
                            : <img className='mark' src={imgUsers}/>}
                        <input type='text' placeholder='填写班级  例：2017级2班' ref='banji' onFocus={this.txtHandle.bind(this, 'banji', 1)} onBlur={this.txtHandle.bind(this, 'banji', 2)}/>
                    </div>
                    <div className='item mbpx'>
                        {imgList.user
                            ? <img className='mark' src={imgList.user}/>
                            : <img className='mark' src={imgUser}/>}
                        <input type='text' placeholder='填写姓名  例：张小明' ref='name' onFocus={this.txtHandle.bind(this, 'name', 1)} onBlur={this.txtHandle.bind(this, 'name', 2)}/>
                    </div>
                    <div className='item mbpx'>
                        {imgList.phone
                            ? <img className='mark mkphone' src={imgList.phone}/>
                            : <img className='mark mkphone' src={imgPhone}/>}
                        <input type='tel' placeholder='家长手机号' ref='phone' onFocus={this.txtHandle.bind(this, 'phone', 1)} onBlur={this.txtHandle.bind(this, 'phone', 2)}/>
                    </div>
                    <div className='item mbpx'>
                        {imgList.posi
                            ? <img className='mark mkphone' src={imgList.posi}/>
                        : <img className='mark mkphone' src={imgPosi}/>}
                        <input type='button' ref='posi' id='city' className='text-left' style={{background:'none'}} />
                    </div>
                    <div className='item'>
                        {imgList.posid
                            ? <img className='mark mkphone' src={imgList.posid}/>
                        : <img className='mark mkphone' src={imgPosid}/>}
                        <input type='text' placeholder='详细地址  例：顺江路122号' ref='posid' onFocus={this.txtHandle.bind(this, 'posid', 1)} onBlur={this.txtHandle.bind(this, 'posid', 2)}/>
                    </div>
                    <div className='dnbotm'>
                        <input type='submit' id='buybtn' className='youhui0' value='提交订单' />
                    </div>
                </form>
                {stop == 1
                    ? <div className='mask'></div>
                    : ''
}
            </div>
        )
    }
}
